<template>
	<div v-if="showList==1">
		<div class="top">
			<div>
				<span style="cursor: pointer;" :class="{chooseOne:flag==1}" @click="flag=1">学生信息</span>
				<span style="cursor: pointer;" :class="{chooseOne:flag==2}" @click="flag=2">课程信息</span>
			</div>
			<div style="display: flex;align-items: center">
				<div v-if="flag==1">
					<el-button @click="changeIdFn" type="info" class="greenBtn">调班</el-button>
					<el-button @click="addStuFn" class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
				</div>
				<div v-if="flag==2">
					<el-button @click="DialogVisible3=true" class="greenBtn" type="info">添加科目</el-button>
					<el-button :disabled="showBtn==1" @click="showAddFn(1)" class="greenBtn" type="info">添加课程表</el-button>
					<el-button :disabled="showBtn==2" @click="showAddFn(2)" class="greenBtn" type="info" style="margin-right: 7px;">修改</el-button>
				</div>
				<a @click="back" style="cursor: pointer;">返回</a>
			</div>
		</div>
		<div v-if="flag==1">
			<el-table @selection-change="handleSelectionChange" ref="multipleTableRef"
				:data="tableData" style="width: 100%" height="58vh">
				<el-table-column type="selection" align="center"></el-table-column>
			    <el-table-column prop="stuName" label="姓名" align="center"/>
			    <el-table-column prop="stuSex" label="性别" align="center"/>
			    <el-table-column prop="stuPhone" label="联系方式" align="center"/>
				<el-table-column prop="stuAddress"
					width="200"
					show-overflow-tooltip
					label="家庭住址" align="center"/>
				<el-table-column label=" " align="center">
					<template #default='scope'>
						<a class="detailBtn" @click="toDetailFn(scope.row.stuId)">详情</a>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default='scope'>
						<a class="delBtn" @click="del(scope.row.stuId)">删除</a>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				layout="prev,pager,next"
				:page-size="pageSize"
				:page-count="pageCount"
				v-model:current-page="pageIndex"
				@current-change="changePage"
			/>
			<!-- 确认删除框 -->
			<el-dialog
			    v-model="dialogVisible1"
			    title="提示"
			    width="400"
				center
			>
			    <span>确定要删除该学生吗</span>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button type="info" class="cancelBtn" @click="dialogVisible1=false">取消</el-button>
			        <el-button class="searchBtn" type="info" @click="define">
			          确定
			        </el-button>
			      </div>
			    </template>
			</el-dialog>
			<!-- 调班 -->
			<el-dialog v-model="DialogVisible" title="班级调整" width="500" center>
			    <el-form
			        ref="ruleFormRef"
			        style="max-width: 380px;"
			        :model="teaData"
			        :rules="rules"
			        label-width="auto"
			    >
					<el-form-item label="新的班级:" prop="teacher">
						<el-select v-model="teaData.classId" placeholder="请选择新的班级">
							<el-option
								v-for="item in classData"
								:label="item.clazzName"
								:value="item.clazzId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button type="info" class="cancelBtn" @click="DialogVisible = false">取消</el-button>
			        <el-button type="info" class="searchBtn" @click="changeClassFn()">确定</el-button>
			      </div>
			    </template>
			</el-dialog>
		</div>
		<div v-if="flag==2">
			<div class="subject">
				<p>当前科目：</p>
				<p v-for="x in classSubArr"><span v-if="x.status==1" v-html="x.subName"></span></p>
			</div>
			<LessonDetail @che="showFn" :classname="clazzName" :addclassid="addClassId"></LessonDetail>
			
		</div>
		<!-- 添加科目 -->
		<el-dialog v-model="DialogVisible3" title="添加科目" width="450" center>
		    <el-form
		        ref="ruleFormRef" 
		        style="max-width: 450px;"
		        label-width="auto"
		    >
				<el-checkbox-group v-model="subIds">
					<el-checkbox
					  v-for="item in classSubArr"
					  :key="item.subId"
					  :label="item.subName"
					  :value="item.subId">
					</el-checkbox>
				</el-checkbox-group>
			</el-form>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button type="info" class="cancelBtn" @click="DialogVisible3 = false">取消</el-button>
		        <el-button type="info" class="searchBtn" @click="addSub()">确定</el-button>
		      </div>
		    </template>
		</el-dialog>
	</div>
	<StudentDetail :stuId="detailId" v-if="showList==2" @changeShow="changeShowFn"></StudentDetail>
	<AddStudents :addclassid="addClassId" v-if="showList==3" @changeShow="changeShowFn"></AddStudents>
	<UpdateLesson  :classname="clazzName" v-if="showList==4" :changenum="changeNum" :addclassid="addClassId" @changeShow="changeShowFn"></UpdateLesson>
	<AddLesson  :classname="clazzName" v-if="showList==5" :changenum="changeNum" :addclassid="addClassId" @changeShow="changeShowFn"></AddLesson>
</template>

<script setup>
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	import {ClassDetail,StudentDelete,ClassList,ChangeClass,ClassSubjectList,AddClassSubject} from "@/api/wym"
	import {reactive,ref,shallowRef,onMounted,defineEmits,defineProps } from "vue";
	import { ElMessage } from 'element-plus'
	import StudentDetail from "@/components/StudentDetail.vue"
	import AddStudents from "@/components/AddStudents.vue"
	import LessonDetail from "@/components/LessonDetail.vue"
	import UpdateLesson from "@/components/UpdateLesson.vue"
	import AddLesson from "@/components/AddLesson.vue"
	// 点击返回
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message');
		// console.log(acIndex)
	}
	
	let showBtn=ref(1)
	// 右上角按钮是否能点击
	function showFn(flag){
		// console.log("flag1111",flag)
		showBtn.value=flag
	}
	
	const props = defineProps({
		classid: Number
	});
	// console.log(props.classid)
	let addClassId=props.classid
	let flag=ref(1)
	const pageSize=7;
	let pageCount = shallowRef(0)
	const pageIndex=shallowRef(1);//当前的页数
	
	// // 查询班级科目
	// let classSubjectArr=ref([])
	// const classSubjectList=async()=>{
	// 	let res=await ClassSubjectList({
	// 		clazzId:props.classid
	// 	})
	// 	console.log("班级科目",res)
	// 	classSubjectArr.value=res
	// }
	
	// 学生列表
	let clazzName;
	let tableData = ref([])
	const studentList=async()=>{
		let res=await ClassDetail({
			clazzId:Number(props.classid),
			pageSize:pageSize,
			pageIndex:pageIndex.value,
		})
		// console.log(res)
		if(res.data.length>0){
			clazzName=res.data[0].clazzName
			tableData.value=res.data
			pageCount.value=res.pages
		}
		
	}
	
	// 显示学生详情
	let showList=ref(1)
	let detailId=ref(null);
	const toDetailFn=(item)=>{
		showList.value=2
		detailId.value=item
	}
	
	// 点击添加学生
	const addStuFn=()=>{
		showList.value=3
	}
	
	// 返回
	function changeShowFn () {
		showList.value = 1;
		studentList()
	}
	
	// 调班
	let multipleTableRef = ref()
	let multipleSelection = ref([])
	let changeId=ref([])
	let teaData=reactive({
		classId:""
	})
	let handleSelectionChange = (val) => {
		multipleSelection.value = val
		// console.log("val",multipleSelection.value)
	}
	// 调班id(点击调班)
	let DialogVisible = ref(false)
	const changeIdFn = ()=>{
		classList()
		multipleSelection.value.forEach(row=>{
			changeId.value.push(row.stuId)
		})
		// console.log("调班id",changeId.value)
		if(changeId.value.length==0){
			ElMessage({
				message:"请先选择学生",
				type:'warning'
			})
		}else{
			DialogVisible.value=true
		}
	}
	
	// 点击调班确定
	const changeClassFn=async()=>{
		// console.log(changeId.value,)
		DialogVisible.value=false
		let res=await ChangeClass({
			clazzId:Number(teaData.classId),
			liststuId:changeId.value
		})
		// console.log(res)
		if(res===undefined){
			ElMessage.success({
				message:"操作成功"
			})
		}else{
			ElMessage.error({
				message:"操作失败"
			})
		}
		studentList()
	}
	
	// 班级列表
	let classData = ref([])
	const classList=async()=>{
		let res=await ClassList({
			pageSize:30,
			pageIndex:1,
		})
		// console.log("班级列表",res)
		classData.value=res.data
	}
	
	//点击删除
	let dialogVisible1=ref(false)
	let studentId;
	const del= (data)=>{
		dialogVisible1.value= true
		studentId=data
	}
	//点击删除中的确定
	const define=async ()=>{
		console.log(studentId)
		dialogVisible1.value= false
		let res =await StudentDelete({
			stuId:studentId
		})
		// console.log("删除",res)
		if(res == 1){
			ElMessage.success({
				message:"删除成功"
			})
		}else{
			ElMessage.error({
				message:"删除失败"
			})
		}
		studentList()
	}
	
	//点击分页
	const changePage=(page)=>{
		pageIndex.value=page;
		// console.log(pageIndex.value)
		studentList();
	}
	
	// 点击添加科目
	let DialogVisible3=ref(false)
	let subIds=ref([])
	// 查询班级科目
	let classSubArr=ref([])
	const classSubjectList=async()=>{
		let res=await ClassSubjectList({
			clazzId:props.classid
		})
		console.log("班级科目",res)
		classSubArr.value=res
	}
	// 点击添加科目中的确定
	const addSub=async()=>{
		// console.log(subIds.value)
		let res=await AddClassSubject({
			clazzId:props.classid,
			listsubId:subIds.value
		})
		console.log("添加科目",res)
		DialogVisible3.value=false
		if(res){
			ElMessage.success({
				message:"添加成功"
			})
		}else{
			ElMessage.error({
				message:"添加失败"
			})
		}
		classSubjectList()
	}
	
	// 点击添加课表/修改
	let changeNum=ref(null)
	const showAddFn=(num)=>{
		if(num==1){
			showList.value=5
		}else{
			changeNum.value=num
			showList.value=4
		}
		// console.log(changeNum.value)
	}
	
	onMounted(()=>{
		studentList()
		classList()
		classSubjectList()
	})
</script>

<style scoped lang="less">
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		span{
			margin-right: 15px;
			font-size: 18px;
		}
		a{
			font-size: 17px;
		}
		.chooseOne{
			font-size: 19px;
			font-weight: 600;
		}
	}
	.greenBtn{
		background-color: #10b008;
		margin-right: 3px;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
		width: 65px;
	}
	// 删除
	.delBtn{
		color: #ff0000;
		cursor: pointer;
	}
	// 详情
	.detailBtn{
		color: #106ab1;
		cursor: pointer;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.cancelBtn{
		background-color: #999999;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;	
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	.el-form-item{
		margin: 20px 0;
		margin-left: 55px;
		.el-select{
			width: 230px;
		}
	}
	.subject{
		display: flex;
		margin-top: 10px;
		align-items: center;
		span{
			margin: 0 5px;
			background-color: #fff;
			padding: 0 5px;
			font-size: 14px;
		}
	}
	
</style>